<template>
  <div class="collectionchannel">
    <!--MQTT配置 -->
     <div class="con"> 
         <div class="title-top">
              <span></span>
              <div class="mybtn" @click ="addChannel">新增配置</div>
         </div>
         <div class="mytable">
                <el-table :data="tableData" height="100%" stripe  style="width: 100%;">
                                        <el-table-column type="index"  width="50" label="序号" align="center"> </el-table-column>
                                        <el-table-column prop="remote_address" width="180" label="服务端地址"> 
                                        </el-table-column>
                                        <el-table-column prop="remote_port" width="100" label="服务端端口"> 
                                        </el-table-column>
                                        <el-table-column prop="remote_port" width="100" label="客户端标识"> 
                                        </el-table-column>
                                        <el-table-column prop="username" width="200" label="用户名" align="center"> 
                                        </el-table-column>
                                        <el-table-column prop="pub_topic" min-width="200" label="发布主题"> 
                                        </el-table-column>
                                        <el-table-column prop="sub_topic" min-width="170" label="订阅主题"></el-table-column>
                                        <el-table-column prop="model_name" width="110" label="物模型"> 
                                        </el-table-column>
                                        <el-table-column width="200" label="操作" fixed="right" align="center"> 
                                             <template  #default="{row}">
                                                    <div class="mysort">
                                                       <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                           <img src="../../assets/btnImg/edit2.png" alt="" style="margin-right:20px" @click.stop="editfn(row)">
                                                        </el-tooltip>
                                                         <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                            <img src="../../assets/btnImg/del2.png" alt="" @click.stop="deletefn(row)">
                                                        </el-tooltip>
                                                           
                                                    </div>
                                                </template>
                                        </el-table-column>
               </el-table>
         </div>
           <!-- 新增/修改 -->
           <el-dialog width="950px" draggable  :title="caozuoType" :close-on-click-modal='false' v-model="addeditflagline">
                    <div class="choicedio">
                        <!-- MQTT客户端 -->
                        <div class="body-items">
                           <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname">服务端地址：</div>
                                <el-input v-model="remote_address" placeholder="[IP地址格式]"></el-input>
                            </div>
                             <div class="items itemright">
                                <div class="leftname">服务端端口：</div>
                                <el-input v-model="remote_port" placeholder="[整型数字]"></el-input>
                            </div>
                            
                            <div class="items">
                                <div class="leftname">客户端标识：</div>
                                <el-input v-model="client_id" placeholder="请输入客户端标识"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items itemright">
                                <div class="leftname">用户名：</div>
                                <el-input v-model="username" placeholder="请输入用户名"></el-input>
                            </div>
                             <div class="items itemright">
                                <div class="leftname">密码：</div>
                                <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
                            </div>
                            <div class="items">
                                <div class="leftname">物模型：</div>
                                <!-- <el-input v-model="model_id" placeholder="请输入发布主题"></el-input> -->
                                <el-select v-model="model_id" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.id"
                                    :label="item.model_name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                           
                         </div>
                           <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">发布主题：</div>
                                <!-- <el-input v-model="pub_topic" placeholder="请输入发布主题" style="width:100%"></el-input> -->
                                <el-select
                                    v-model="pub_topic"
                                    multiple
                                    filterable
                                    allow-create
                                    default-first-option
                                    placeholder="请输入/选择发布主题" style="width:100%">
                                    <el-option
                                    v-for="item in pubOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            
                           
                         </div>
                           <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">订阅主题：</div>
                                <el-select
                                    v-model="sub_topic"
                                    multiple
                                    filterable
                                    allow-create
                                    default-first-option
                                    placeholder="请输入/选择订阅主题" style="width:100%">
                                    <el-option
                                    v-for="item in subOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                             
                           
                         </div>
                        </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                      <template #footer>
                                 <div class="dialog-footer">
                                  <el-button  @click="addeditflagline = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
                                 </div>
                    </template>
                   
                      
                    
           </el-dialog>
          <div class="el-loading-mask" v-show="isMask">
             <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>
          </div>
     </div>
  </div>
</template>

<script>
import {getMQTTClientConfig,saveMQTTClientConfig,editMQTTClientConfig,delMQTTClientConfig,getModelLists} from "../../api/Interface";
export default {

  data() {
    return {
      addeditflagline:false,//新增修改弹窗
      diaisMask:false,//弹窗的缓冲
      gudingchannel_number:"",
      rightname:"",
      tableData:[],
      radio:"1",
      checked:true,
      isMask:false,
      input:"",
      protocolList:[],
      //表格选中
      nowTableRow:{},
      nowChangnow:false,
      caozuoType:"新增配置",
      deviceArrAll:[],//全部设备
      options:[],
      remote_address:"",
      remote_port:"",
      client_id:"",
      username:"",
      password:"",
      model_id:"",
      pub_topic:[],
      sub_topic:[],
      pubOptions:[],
      subOptions:[]
    };
  },

  mounted() {
     this.getmodeListAll()
     
  },
  watch:{
  },

  methods: {
    //获取物模型列表
    getmodeListAll(){
      this.isMask = true
        getModelLists().then(res => {
         this.isMask = false
        //  console.log("channel_protocolZhuan",this.protocolList);
         if(res == ""){
              this.tableData = []
         }else {
          this.options = res
         }
         this.getListAll()
          
        })
    },
    //新增通道编辑
    addChannel() {
        this.remote_address = ""
        this.remote_port = ""
        this.client_id = ""
        this.username = ""
        this.password = ""
        this.model_id = ""
        this.pub_topic = []
        this.sub_topic = []
        this.caozuoType = '新增配置'
        this.addeditflagline = true
    },
    //获取表格列表
    getListAll(){
      this.isMask = true
        getMQTTClientConfig().then(res => {
         this.isMask = false
        //  console.log("channel_protocolZhuan",this.protocolList);
         if(res == ""){
              this.tableData = []
         }else {
             var guiyueArr = []
             res.forEach(item => {
                 guiyueArr = this.options.filter(tt => tt.id == item.model_id)
                 item.model_name = guiyueArr.length != 0? guiyueArr[0].model_name : ""
             })
          this.tableData = res
          // console.log("获取表格列表",this.tableData);
         }
          
        })
    },
    //新增修改通道
    addpassageway(){
        if(this.remote_address === ""){
            this.$message({showClose: true,message: '服务端地址不能为空',type: 'warning'});
            return
        }
        if(this.remote_port === ""){
            this.$message({showClose: true,message: '服务端端口不能为空',type: 'warning'});
            return
        }
        if(this.client_id === ""){
            this.$message({showClose: true,message: '客户端id不能为空',type: 'warning'});
            return
        }
        if(this.username === ""){
            this.$message({showClose: true,message: '用户名不能为空',type: 'warning'});
            return
        }
        if(this.password === ""){
            this.$message({showClose: true,message: '密码不能为空',type: 'warning'});
            return
        }
        if(this.pub_topic.length == 0){
            this.$message({showClose: true,message: '发布主题不能为空',type: 'warning'});
            return
        }
        if(this.sub_topic.length == 0){
            this.$message({showClose: true,message: '订阅主题不能为空',type: 'warning'});
            return
        }
        if(this.model_id === ""){
            this.$message({showClose: true,message: '请选择物模型',type: 'warning'});
            return
        }
        var d = {
          remote_address:this.remote_address,
          remote_port:Number(this.remote_port),
          client_id:Number(this.client_id),
          username:this.username,
          password:this.password,
          pub_topic:this.pub_topic.join(),
          sub_topic:this.sub_topic.join(),
          model_id:this.model_id,
        }
      
      if(this.caozuoType == '新增配置'){//新增
          this.diaisMask = true
          saveMQTTClientConfig(d).then(res => {
            // console.log("新增通道",res);
            this.diaisMask = false
            if(res != undefined){
                 this.getListAll()
                 this.addeditflagline = false
                  this.$message({showClose: true,message: '新增成功',type: 'success'});
            }else {
                this.$message({showClose: true,message: '新增失败',type: 'error'});
            }
          })
      }else {
         this.diaisMask = true
         d.id = this.nowTableRow.id
           editMQTTClientConfig(d).then(res => {
            this.diaisMask = false
            // console.log("更新通道",res);
            if(res != undefined){
                 this.addeditflagline = false
                  this.$message({showClose: true,message: '更新成功',type: 'success'});
                  this.getListAll()
            }else {
                this.$message({showClose: true,message: '更新失败',type: 'error'});
            }
          })
      }
      
      
    },
    //修改配置
    editfn(row){
        this.remote_address = row.remote_address
        this.remote_port = row.remote_port
        this.client_id = row.client_id
        this.username = row.username
        this.password = row.password
        this.model_id = row.model_id
        this.pubOptions = []
        this.subOptions = []
        if(row.pub_topic != ""){
          var pubarr = row.pub_topic.split(",")
          this.pub_topic = pubarr
         
        }
        if(row.sub_topic != ""){
          var pubarr = row.sub_topic.split(",")
          this.sub_topic = pubarr
          
        }
        this.caozuoType = '修改配置'
        this.nowTableRow = row
        this.addeditflagline = true
    },
    //删除通道
    deletefn(row){
        this.$confirm(`是否要删除此通道？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
               
               delMQTTClientConfig({'id':row.id}).then(res => {
                  // console.log("删除",res);
                  if(res == undefined){
                     this.$message.error('删除失败！！')
                  }else {
                     this.$message({showClose: true,message: '删除成功',type: 'success'});
                    this.getListAll()
                  }
               }).catch(error => {
                    this.$message.error('删除失败！！')
               })   
            }).catch(() => {
              // ...
            });
    },

    
    
  },
  filters: {
      // 转换时间戳
      "date_format": function(value) { //value就是插值的数据
        if(!value) {
          return ""
        }
        return value
      },
    }
};
</script>
<style lang="scss" scoped>
    
    .collectionchannel {
         width: 100%;
         height: 100%;
         position: relative;
         .con {
             width: 100%;
             height: 100%;
             background-color: #fff;
            //  padding: 12px;
             box-sizing: border-box;
           .title-top {
             width: 100%;
             height: 42px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             border-bottom: 1px solid #E6E6E6;
             padding: 0px 12px;
             box-sizing: border-box;
             span {
                 font-size: 14px;
                 color: #1A1A1A;
             }
             
           }
           .mytable {
              width: 100%;
              height: calc(100% - 80px);
              padding: 0px 12px;
              box-sizing: border-box;
              margin-top: 12px;
              .mysort {
                 display: flex;
                 align-items: center;
                 justify-content: center;
              }
              .mysort-text {
               color:#2178F1;
              }
           }
          
        }
    }
    .infoitems {
       display: flex;
       align-items: center;
       .items {
         width: 50%;
       }
       .itemright {
         margin-right: 20px;
       }
       
    }
    .body-items {
      margin-top: 10px;
      .infoitems {
        .items {
              width: 33%;
              .leftname {
                     width: 80px;
                    min-width: 80px;
              }
          }
      }
           
       }
</style>